<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg1.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' leftIconColor="#fff" bgColor="transparent" @leftClick="navBack" title="危机评估">
				<view slot="center" class="navTitle" style="color: #fff;">
					<text v-if="info&&info.userName">{{info.userName}}-</text> 危机评估
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					
					<view class="wbox" v-if="info">
						<view class="bg">
							<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxbg3-1.png" mode="widthFix"></image>
						</view>
						
						<view class="map" :class="info.score?'':'nomap'">
							<view class="cvscontainer" v-if="info.score">
								<view class="cvs">
									<view class="line2 line">
										<view class="dot1"></view>
										<view class="dot2"></view>
										<view class="i1">
											<view class="cr" :style="'transform:rotate('+(-(136-136*info.score/info.referenceScore))+'deg)'"></view>
										</view>
									</view>
								</view>
							</view>
							<view class="hd">
								<view class="score">
									<text class="num">{{info.score}}</text><text>分</text>
								</view>
								<view class="name">
									评估得分
								</view>
								<view class="p" v-html="info.content"></view>
								<view class="tag" :style="'color:'+stageOption(info.stage).color+';background:'+stageOption(info.stage).bgColor">
									{{stageOption(info.stage).label}}
								</view>
							</view>
						</view>
						<view class="tit border">
							个人信息
						</view>
						<view class="lines">
							<view class="line">
								<view class="ll">姓名</view>
								<view class="lr">{{info.userName}}</view>
							</view>
							<view class="line">
								<view class="ll">性别</view>
								<view class="lr">{{info.sex}}</view>
							</view>
							<view class="line">
								<view class="ll">年级</view>
								<view class="lr">{{info.gradeName}}</view>
							</view>
							<view class="line">
								<view class="ll">班级</view>
								<view class="lr">{{info.classesName}}</view>
							</view>
							<view class="line">
								<view class="ll">填表教师</view>
								<view class="lr">{{info.teacherName || ''}}</view>
							</view>
							<view class="line">
								<view class="ll">时间</view>
								<view class="lr">{{info.createTimeFormat}}</view>
							</view>
						</view>
					</view>
					<view class="wbox" v-if="warnResult&&warnResult.length>0">
						<view class="tit">
							测评量表结果
						</view>
						<view class="table">
							<view class="tbody">
								<view class="tr th">
									<view class="td td-2">
										量表
									</view>
									<view class="td td1">
										测评结果
									</view>
									<view class="td td-2">
										时间
									</view>
								</view>
								<view class="tr" v-for="(td,index) in warnResult" :key="index">
									<view class="td td-2">
										{{td.questionName}}
									</view>
									<view class="td td1" :style="'color:'+stageOption(td.stage).color">
										{{td.dimensionLevel}}
									</view>
									<view class="td td-2">
										{{td.operateTime}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wbox" v-if="testResult.length>0&&testOptions.length>0">
						<view class="tit">
							危机评估
						</view>
						<view class="pinguTest">
							<view class="pitem" v-for="(i,index) in testOptions" :key="index">
								<view class="ptit" slot="title">
									<view class="tl">
										<text>{{i.title}}</text>
										<view class="tp" v-if="i.children.length==1&&(i.children[0].type==1||!i.children[0].require)">
											(<text>{{i.children[0].type==1?'多选,':''}}</text>
											<text>{{i.children[0].require?'':'非必填'}}</text>)
										</view>
									</view>
									<view class="tr">
										<view class="ico">
											<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
										</view>
									</view>
								</view>
								<view class="ul">
									<view class="li" v-for="(j,jindex) in i.children" :key="jindex">
										<view class="lt" v-if="j.title">
											<text>问题{{chineseNumber[jindex]}}、</text>
											<text>{{j.title}}</text>
										</view>
										<view class="ops" :class="j.isGrid?'grid':''">
											<view class="op" :class="testResult[index][jindex].selected.includes(oindex)?'selected':''" v-for="(op,oindex) in j.options">
												<text v-if="j.type==0">{{enLetters[oindex]}}.</text>
												<text>{{op}}</text>
											</view>
											<view class="op" 
											v-if="j.otherOption"
											:class="testResult[index][jindex].isOtherSelect?'selected':''"
											>
												{{j.otherOption}}
											</view>
										</view>
										<view class="otherInput" v-if="j.otherOption&&testResult[index][jindex].isOtherSelect">
											<input type="text" disabled="" :placeholder="'选择'+j.otherOption+'则需要填写描述'" v-model="testResult[index][jindex].otherContent" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemid:'',
				info: {},
				testOptions:[],
				warnResult:[],
				testResult:[]
			}
		},
		methods: {
			getInfo() {
				this.$api.riskrecordDetail({
					id: this.itemid
				}, res => {
					if (res.code == 200) {
						this.info = res.data
						this.testOptions = JSON.parse(res.data.questionDataList)
						this.warnResult = JSON.parse(res.data.warnResult)

						this.testOptions.some(topic => {
							topic.topicList.some(item => {

								item.optContent = JSON.parse(item.optContent)
								this.$set(item, 'value', '')
								if (item.type == 2) {
									item.optContent.some(item1 => {
										this.$set(item1, 'select', false)
									})
								}
							})
						})
						console.log(this.testOptions, 1212)

					}
				})
			},
			getResult(){
				var that=this;
				var res=[
					[{'selected':[0],'isOtherSelect':false,'otherContent':''},{'selected':[1],'isOtherSelect':false,'otherContent':''}],
					[{'selected':[0],'isOtherSelect':false,'otherContent':''},{'selected':[1],'isOtherSelect':false,'otherContent':''}],
					[{'selected':[0],'isOtherSelect':false,'otherContent':''},{'selected':[1],'isOtherSelect':false,'otherContent':''}],
					[{'selected':[2],'isOtherSelect':false,'otherContent':''}],
					[{'selected':[2],'isOtherSelect':false,'otherContent':''}],
					[{'selected':[0,6],'isOtherSelect':true,'otherContent':'风险描述内容'}],
					[{'selected':[2,6,8,9],'isOtherSelect':true,'otherContent':'昨天就有轻生发生'}]
				];
				that.testResult=res;
			},
			getTest(){//获取题目
				var that=this;
				var res=[
					{
						title:'自杀风险评估',
						children:[
							{
								title:'目前自杀计划',
								require:true,
								type:0,//0单选,1多选
								isGrid:false,
								options:['无计划 ','有计划，致死性低或可执行性差','有计划，致死性高或可执行性高','有计划，致死性高且可执行性高']
							},
							{
								title:'既往自杀计划',
								require:true,
								type:0,//0单选,1多选
								isGrid:false,
								options:['无','曾经有自杀经历，但最近一年没有','最近一年有自杀经历','最近一年有多次自杀经历']
							}
						]
					},
					{
						title:'自伤风险评估',
						children:[
							{
								title:'目前自伤计划',
								require:true,
								type:0,//0单选,1多选
								isGrid:false,
								options:['无计划','有计划，致伤性低或可执行性差','有计划，致伤性高或可执行性高','有计划，致伤性高且可执行性高']
							},
							{
								title:'既往自伤计划',
								require:true,
								type:0,//0单选,1多选
								isGrid:false,
								options:['无','曾经有自杀经历，但最近一年没有','最近一年有自杀经历','最近一年有多次自杀经历']
							}
						]
					},
					{
						title:'攻击风险评估',
						children:[
							{
								title:'当前攻击性',
								require:true,
								type:0,//0单选,1多选
								isGrid:false,
								options:['无计划','有计划，致伤性低或可执行性差','有计划，致伤性高或可执行性高','有计划，致伤性高且可执行性高']
							},
							{
								title:'既往攻击性',
								require:true,
								type:0,//0单选,1多选
								isGrid:false,
								options:['无','曾经有自杀经历，但最近一年没有','最近一年有自杀经历','最近一年有多次自杀经历']
							}
						]
					},
					{
						title:'压力应对',
						children:[
							{
								require:true,
								type:0,//0单选,1多选
								isGrid:false,
								options:['没有现实压力','有一些现实压力，但能应对','现实压力较大，但能应对','现实压力过大，无法应对']
							}
						]
					},
					{
						title:'支持系统',
						children:[
							{
								require:true,
								type:0,//0单选,1多选
								isGrid:false,
								options:['社会支持系统丰富，与父母关系融洽，有亲密的朋友','有社会支持，但较难获得帮助','与父母关系差，没有亲密朋友或朋友数量极少']
							}
						]
					},
					{
						title:'临床评估',
						children:[
							{
								require:false,
								type:1,//0单选,1多选
								isGrid:true,
								otherOption:'其他风险事件',
								options:['自杀','自伤','攻击他人','校园霸凌','性侵犯','学业危机','家庭冲突','犯罪相关','离家/离校出走','危险性行为']
							}
						]
					},
					{
						title:'异常表现评估',
						children:[
							{
								require:true,
								type:1,//0单选,1多选
								isGrid:false,
								otherOption:'其他事件',
								options:[
									'经常无故请假(如请假超过一周又无可信的请假 缘由)',
									'原生家庭解体(父母分居、离异或去世等)',
									'情绪容易暴躁、发怒、易激惹',
									'情绪长期低落压抑，有强烈焦虑、恐慌、紧张，或罪恶感和自责情绪明显',
									'曾经有过较严重的打架斗殴、伤害他人的行为',
									'性格极度内，孤僻缺少朋友，同伴关系淡漠',
									'亲子关系恶劣或冷漠，经常发生亲子冲突，社会支持系统长期缺乏或丧失',
									'经常会出现无缘由的、较严重的睡眠问题',
									'幼年经历过较为严重的创伤(如受家暴、性侵)或有长期寄养经历',
									'近期存在诸如家庭变故、学业受挫、人际冲突、躯体疾病等重大应激事件',
									'情绪突然明显异常，如特别烦躁、焦虑，无法 控制冲动，情绪异常低落或突然从低落变为平静',
									'近来，突然对宗教、哲学、死亡话题产生浓厚 兴趣',
									'突然避开同学、老师或亲人;拒绝和人沟通，做 出抽烟、酗酒等反常的事',
									'不明原因突然向同学、朋友或家人赠送礼物、请客、赔礼道歉、述说告别的话语等，行为明 显改变',
									'正在接受心理治疗的学生(如患有抑郁症、恐怖症、强迫症、焦虑症等)或患有精神分裂症 并已经确诊的学生'
									]
							}
						]
					}
				];
				that.testOptions=res;
			}
		},
		watch:{
			itemid:function(){
				this.getInfo();
				this.getResult();
				this.getTest();
			}
		},
		onLoad(e) {
			this.itemid=e.id
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.wbox{
		padding: 40rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 30rpx;
		position: relative;
		z-index: 10;
		.bg{
			position: absolute;
			z-index: -1;
			right: 0;
			bottom: 0;
			width: 290rpx;
			image{
				display: block;
				width: 100%;
				height: auto;
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
		.btns{
			margin-top: 80rpx;
			margin-bottom: 20rpx;
			.btn{
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				background: #fe9c29;
				line-height: 90rpx;
				border-radius: 90rpx;
			}
		}
		.tit{
			font-size: 32rpx;
			padding-bottom: 30rpx;
			color: #4d5765;
			&.border{
				border-bottom: 1rpx solid #f4f6f8;
			}
		}
		.lines{
			padding: 20rpx 0 0;
			.line{
				display: flex;
				padding: 10rpx 0;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				.ll{
					flex: 0 0 auto;
					color: #7c838d;
				}
				.lr{
					flex: 1 1 auto;
					padding-left: 30rpx;
					text-align: right;
					overflow: hidden;
					color: #4d5765;
				}
			}
		}
		.table{
			.td1{
				padding: 20rpx 10rpx;
				width: 20%;
			}
			.td-2{
				width: 40%;
				padding: 20rpx 10rpx;
			}
		}
		.pinguTest{
			.pitem{
				padding: 30rpx 20rpx;
				background: #e5f1ff;
				margin-bottom: 30rpx;
				border-radius: 30rpx;
				&:last-child{
					margin-bottom: 0;
				}
				.li{
					padding: 36rpx 30rpx;
					background: #fff;
					margin-bottom: 10rpx;
					border-radius: 30rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.lt{
						padding-bottom: 30rpx;
						font-size: 28rpx;
						color: #4d5765;
						line-height: 1.2;
					}
					.ops{
						.op{
							max-width: 100%;
							box-sizing: border-box;
							padding: 20rpx 30rpx;
							background: #f4f6f9;
							border-radius: 10rpx;
							font-size: 24rpx;
							color: #4d5765;
							margin-bottom: 8rpx;
							&:last-child{
								margin-bottom: 0;
							}
							&.selected{
								background: #ffefdd;
								color: #fe9c29;
							}
						}
						&.grid{
							display: flex;
							flex-wrap: wrap;
							margin-right: -8rpx;
							.op{
								flex: 1 0 auto;
								padding: 20rpx;
								text-align: center;
								margin-right: 8rpx;
							}
						}
					}
					.otherInput{
						margin-top: 30rpx;
						input{
							width: 100%;
							box-sizing: border-box;
							padding: 0 30rpx;
							height: 90rpx;
							line-height: 90rpx;
							font-size: 24rpx;
							color: #4d5765;
							border: none;
							outline: none;
							background: #f4f6f9;
							border-radius: 90rpx;
						}
					}
				}
				.ptit{
					display: flex;
					align-items: center;
					line-height: 1;
					font-size: 28rpx;
					color: #4d5765;
					padding: 0 30rpx 30rpx;
					.tl{
						flex: 1 1 auto;
						overflow: hidden;
						padding-right: 30rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
					.tr{
						flex: 0 0 auto;
						.ico{
							transform: rotate(90deg);
							image{
								display: block;
								width: 12rpx;
								height: 24rpx;
							}
						}
					}
				}
			}
		}
		.cvscontainer{
			padding-bottom: 50%;
			position: relative;
			overflow: hidden;
			pointer-events: none;
			.line{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				overflow: hidden;
				&:after{
					content: "";
					display: block;
					width: 100%;
					padding-bottom: 100%;
				}
				.dot1{
					position: absolute;
					left: 30rpx;
					bottom: 50%;
					width: 10rpx;
					height: 10rpx;
					background: #fb9b36;
					border-radius: 50%;
					margin-bottom: 5rpx;
				}
				.dot2{
					position: absolute;
					right: 30rpx;
					bottom: 50%;
					width: 10rpx;
					height: 10rpx;
					background: #e1ebf8;
					border-radius: 50%;
					margin-bottom: 5rpx;
				}
				.i1{
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: calc(50% + 10rpx);
					overflow: hidden;
					.cr{
						position: absolute;
						left: 30rpx;
						top: 30rpx;
						right: 30rpx;
						transform: rotate(-136deg);
						&:after{
							content: "";
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							border-left: 10rpx solid #fb9b36;
							border-top: 10rpx solid #fb9b36;
							border-right: 10rpx solid #e1ebf8;
							border-bottom: 10rpx solid #e1ebf8;
							border-radius: 50%;
							box-sizing: border-box;
						}
						&:before{
							content: "";
							display: block;
							padding-bottom: 100%;
						}
					}
					
				}
				&.line2{
					left: 20rpx;
					right: 20rpx;
					top: 20rpx;
					position: absolute;
					z-index: 5;
					.dot1{
						background: #679bd9;
					}
					.i1{
						.cr:after{
							border-left: 10rpx solid #679bd9;
							border-top: 10rpx solid #679bd9;
						}
					}
				}
			}
		}
		.map{
			position: relative;
			z-index: 5;
			padding-bottom: 50rpx;
			margin-bottom: 40rpx;
			&.nomap{
				padding-bottom: 0;
				.hd{
					position: static;
					left: 0;
					right: 0;
					.score,.tag{
						display: none;
					}
				}
			}
			.hd{
				position: absolute;
				left: 60rpx;
				right: 60rpx;
				bottom: 0;
				text-align: center;
				color: #4d5765;
				.score{
					font-size: 24rpx;
					
					line-height: 1;
					margin-bottom: 20rpx;
					.num{
						font-size: 64rpx;
					}
				}
				.name{
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.p{
					padding: 10rpx 20rpx 30rpx;
					font-size: 24rpx;
					color: #7e8998;
				}
				.tag{
					display: inline-block;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #fe9c29;
					background: #ffebd4;
					border-radius: 4rpx;
					padding: 0 12rpx;
				}
			}
		}
	}
</style>